<template>
  <div class="table">
    <el-table :data="data.tableData" stripe max-height="600px" class="card">
      <el-table-column prop="productName" label="药品名称" fixed="left"></el-table-column>
      <el-table-column label="药品图片" fixed="left">
        <template #default="scope">
          <el-image
              :src="scope.row.imageUrl"
              :preview-src-list="[scope.row.imageUrl]"
              preview-teleported
              style="width: 40px; height: 40px; border-radius: 50%"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="药品价格"/>
      <el-table-column prop="unit" label="价格单位"/>
      <el-table-column prop="stockQuantity" label="库存数量"/>
      <el-table-column prop="currentStock" label="当前库存"/>
      <el-table-column prop="category" label="药品类别" show-overflow-tooltip width="200"/>

    </el-table>

    <div class="card">
      <el-pagination
          style="margin-top: 5px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="data.pageNum"
          :page-sizes="[3, 5, 10, 15, 20]"
          :page-size="data.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="data.total">
      </el-pagination>
    </div>
  </div>
</template>
<script setup>
import {reactive} from "vue";
import {loadSellerProductApi} from "@/utils/API/shop/SellerProduct";
import {ElMessage} from "element-plus";

const data = reactive({
  tableData: [],  // 表格数据
  pageNum: 1,     // 当前页码
  pageSize: 10,   // 每页显示数量
  total: 0,       // 总记录数
  name: null,     // 搜索条件
  formVisible: false, // 表单显示状态
  form: {},       // 表单数据
  ids: [],        // 选中数据的ID
  productName: null,
  user: JSON.parse(localStorage.getItem('system-user') || '{}'),
})

const load = () => {
  let params = {
    pageNum: data.pageNum,
    pageSize: data.pageSize,
    productName: data.productName,
  }
  loadSellerProductApi(params).then(res => {
    if (res.code === '200') {
      data.tableData = res.data?.list
      data.total = res.data?.total
      console.log(data.tableData)
    } else {
      ElMessage.error(res.msg)
    }
  })
}
load()
// 处理页码变化
const handleCurrentChange = (pageNum) => {
  data.pageNum = pageNum
  load()
}
const handleSizeChange=(pageSize)=> {
  data.pageSize = pageSize
  load()
}
</script>
<style scoped>

</style>